<template>
    <div class="film-card">
      <div class="card-cont">
        <div class="card-poster">
          <div class="card-pice">
            <img
              src="	https://p0.meituan.net/movie/af1f6c6cf39d57f49e039980b8249d3a544445.jpg@464w_644h_1e_1c"
              alt=""
            />
          </div>
          <div class="film-introduce">
            <div class="tiele">
              <h3>失控玩家</h3>
              <div class="ustiele">Free Guy</div>
              <div class="film-score">
                <span>9.0</span><span>(8.3万人评)</span>
              </div>
            </div>
            <ul class="film-type">
              <li>动作，冒险，</li>
              <li>美国/114分钟</li>
              <li>2021-8-27中国大陆上映</li>
            </ul>
          </div>
        </div>
        <div class="interactive">
          <div class="item" @click="xinagkan">
            <van-rate
              :size="15"
              color="#ffd21e"
              void-icon="like"
              void-color="#eee"
              count="1"
              v-model="xkvalue"
            />想看
          </div>
          <div class="item" @click="kanguo">
            <van-rate
              :size="15"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
              count="1"
              v-model="kgvalue"
            />看过
          </div>
        </div>
      </div>
    </div>
</template>
<script>
// props:{{id}};
export default {
  data() {
    return {
      xkvalue:0,
      kgvalue:0
    }
  },
  methods: {
    xinagkan(){
      if(this.xkvalue==0)this.xkvalue=1;
    },
    kanguo(){
      if(this.kgvalue==0)this.kgvalue=1;
    }
  },
}
</script>
<style scoped>
.film-card {
  width: 100%;
  background-color: linear-gradient(to bottom, #b199b6, #4e384a);
  position: relative;
}
.film-card:before {
  content: "";
  display: table;
}
.film-card .card-cont {
  margin: 20px 20px;
}
.film-introduce {
  text-align: left;
  margin-left: 10px;
  color: #9b89e1;
}
.film-introduce .tiele h3 {
  font-size: 20px;
  font-weight: bolder;
  margin-bottom: 5px;

}
.tiele .ustiele {
  font-size: 15px;
}
.card-poster {
  display: flex;
}
.card-poster .card-pice img {
  width: 120px;
  height: auto;
  z-index: 3;
  border-radius: 5px;
}
.film-score {
  margin: 15px 0;
}
.film-score span:nth-child(1) {
  font-size: 20px;
  color: #ffb400;
  font-style: italic;
  padding-right: 5px;
}
.film-score span:nth-child(2) {
  font-size: 10px;
}
.film-type {
  margin: 20px 0;
}
.film-type li {
  margin-bottom: 10px;
}
.interactive {
  width: 100%;
  display: flex;
  font-size: 12px;
}
.interactive .item{
  height:30px;
  width: calc(100% - 10px);
  margin-right: 5px;
  text-align: center;
  line-height: 30px;
  background: rgba(178, 182, 179, 0.5);
  border-radius: 5px;
  color: #9b89e1;
}
.interactive .item:nth-child(1){
    margin-right: 10px;
}
::v-deep .van-icon::before{
   position: relative;
   top:2px;
   right: 5px;
}
</style>